<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>添加设计师</title>
<!-- 引入CSS和JS文件   -->
<script src="layui/layui.js" charset="utf-8"></script>
<script src="js/x-layui.js" charset="utf-8"></script>
<link rel="stylesheet" href="css/x-admin.css" media="all">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script type="text/javascript" src="js/global.js"></script>

</head>

<body>
	<div class="x-body">
		<form class="layui-form" id="addDesignerfrom">
			<div class="layui-form-item">
				<label for="username" class="layui-form-label"> <span
					class="x-red">*</span>设计师名称
				</label>
				<div class="layui-input-inline">
					<input type="text" id="name" name="name" required=""
						autocomplete="off" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label for="username" class="layui-form-label"> <span
					class="x-red">*</span>职位
				</label>
				<div class="layui-input-inline">
					<input type="text" id="position" name="position" required=""
						autocomplete="off" class="layui-input">
				</div>
			</div>
			
				<div class="layui-form-item">
				<label for="L_email" class="layui-form-label"> <span
					class="x-red">*</span>设计师图片
				</label>
				<div class="layui-input-inline">
					<button type="button" class="layui-btn" id="designerpicbtn">
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
				</div>
			</div>
			<!-- 存储上传产品主图的地址 -->
			<input type="hidden" id="designerpic" name="designerpic">
			<div id="mainpicdiv">
				<img alt="" src="" width="100px" height="100px" id="mainShow">
			</div>
			

			<div class="layui-input-block">
				<div class="layui-form-item">
					<button class="layui-btn" lay-filter="add" lay-submit>增加</button>
				</div>
			</div>

		</form>
	</div>
</body>

<script>
	layui.use([ 'upload', 'form' ], function() {
		var upload = layui.upload;//加载upload上传文件的组件
		var form = layui.form;//引入form组件
		var $ = layui.$;//加载jQ组件
		//隐藏区域
		$("#mainpicdiv").hide();
		
		//执行实列
		var uploadInst = upload.render({
			elem : '#designerpicbtn',//绑定元素
			url : './DesignerPicServlet',//上传接口 
			done : function(res){
				//上传完毕回调
				if(res.success == true){
					//回显图片	
				    $('#mainShow').attr("src","images/" + res.remark);
					//将后台返回的图片地址设置到隐藏域中
					$("#designerpic").val("images/" + res.remark);
					layer.msg("图片上传成功！");
					//显示隐藏区域
					$("#mainpicdiv").show();
				}
			},
			error : function(){
				//请求异常
				layer.msg("请求异常");
			}
		});
		
		//添加设计师信息
   		form.on('submit(add)',function(){
   			//获取用户输入的设计师信息 -- 并封装参数
   			alert(JSON.stringify($('#addDesignerfrom').serializeArray()));
	      
   			//定义接口地址
   			var add_pro_url = "DesignerServlet?url=add";
   			
   			//$('#addRoleForm').serialize() -- 获取表单中用户输的的信息，并序列化
   			$.post(add_pro_url,$('#addDesignerfrom').serializeArray(),function(res){
   				
   				if(res.success == true){
   					layer.alert('添加成功！',function(){
   						//关闭添加角色的窗口
   						// 根据父窗口获取当前窗口frame的索引
	               		var index = parent.layer.getFrameIndex(window.name);
	                	// 使用父窗口来关闭当前子窗口frame
	                	parent.layer.close(index);
	                	//刷新父窗口 -- 重载父窗口
	                	window.parent.location.reload();
   					});
   				}else{
   					layer.alert('添加失败！');
   				}
   				
   			},'json')
   			return false;//这一句话一定要加上***
   		});
		
	
	});
</script>

</html>